<div class="bjui-pageContent" >
    <div class="row">
            <table data-toggle="tablefixed" class="table table-bordered" data-width="100%" data-height="30%" data-nowrap="true">
                <thead>
                <tr>
                    <th colspan="10" align="center" >
                        <h3>
                            <p >
                                    报废分布情况
                            </p>
                        </h3>
                    </th>
                </tr>
                <tr align="center">
                    <th  align="center" >
                        <h6>
                            <p >
                                ${tableInstance.DNAME}
                            </p>
                        </h6>
                    </th>
                </tr>
                <tr  >
                    <g:each in="${wipfollowlist}" status="i" var="tableInstance">
                        <th style="height: 35px;" align="center" > ${tableInstance.DESCRIPTION}</th>
                    </g:each>
                </tr>
                </thead>
                <tbody>
                <tr align="center"    >
                    <g:each in="${wipfollowlist}" status="i" var="tableInstance">
                        <td>
                            <a data-toggle="dialog" data-width="1200" title="在制品明细 data-height="400" data-id="wipList"href="${request.getContextPath()}/wip/wipList">${tableInstance.LOT_SIZE}</a>
                        </td>
                    </g:each>
                </tr>
                </tbody>
            </table>
    </div>
    <div class="row" style="padding: 0 8px;height: 40px"></div>
    <div class="row" style="padding: 0 8px;">
        <div class="col-md-12" style="padding: 0px;margin: 0px">
            <div class="panel panel-default" >
                <div class="panel-heading">
                    <h3 class="panel-title"><i class="fa fa-line-chart fa-fw"></i>
                        各工序报废品分布
                    </h3>
                </div>
                <div class="panel-body">
                    <div  id="main" style="height: 420px;"></div>
                </div>
            </div>
        </div>
    </div>
</div>



<script  src="${request.getContextPath()}/js/echarts/echarts.js"></script>
<script  src="${request.getContextPath()}/js/echarts/echarts-tool.js"></script>

    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var contextPath = "${request.getContextPath()}";
        eChartsTool.init(contextPath);
        var data=[];
        <g:each in="${wiphic}" status="i" var="tableInstance">
        data.push('${tableInstance.DESCRIPTION}')
        </g:each>

        // 指定图表的配置项和数据
        var option = {
            title: {
                text: ''
            },
            tooltip: {},
            legend: {
                data:['批数']
            },
            xAxis: {
                "axisLabel":{
                    "interval":0,
                    "rotate":45,

                },
                data:data

            },
            yAxis: {},
            series: [{
                name: '批数',
                type: 'bar',
                data: ${wiphic.LOT_SIZE}
            }]
        };

        // 使用刚指定的配置项和数据显示图表。
        eChartsTool.setOption("roma", document.getElementById('main'), option);

    </script>
